<template>
  <el-form v-if="setting" :model="setting" label-position="top">
    <el-form-item label="进度条类型">
      <el-select v-model="setting.config.type">
        <el-option
          v-for="item in configData.typeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="进度条状态">
      <el-select v-model="setting.config.status">
        <el-option
          v-for="item in configData.statusList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="进度条宽度">
      <el-slider
        v-model="setting.config.strokeWidth"
        :min="6"
        :max="12"
        size="small"
      />
    </el-form-item>
    <el-form-item label="条纹">
        <el-switch v-model="setting.config.striped"></el-switch>
    </el-form-item>
    <el-form-item label="条纹滚动">
        <el-switch v-model="setting.config.stripedFlow"></el-switch>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref, defineModel } from "vue";
const setting = defineModel();
console.log(setting.value);
const configData = ref({
  typeList: [
    { value: "line", label: "线型" },
    { value: "circle", label: "圆环" },
    { value: "dashboard", label: "面板" },
  ],
  statusList: [
    { value: "success", label: "success" },
    { value: "exception", label: "exception" },
    { value: "warning", label: "warning" },
  ],
});
</script>